<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
    <h1>websocket</h1>
    <script>
        // 当文档加载完毕时执行
        document.addEventListener('DOMContentLoaded', function() {
            // 创建WebSocket连接
            var ws = new WebSocket('ws://localhost:8080/ws');

            // 连接打开时触发
            ws.onopen = function() {
                console.log('WebSocket is connected.');
            };

            // 接收到消息时触发
            ws.onmessage = function(event) {
                console.log('Message from server: ', event.data);
            };

            // 连接出错时触发
            ws.onerror = function(error) {
                console.error('WebSocket error: ', error);
            };

            // 连接关闭时触发
            ws.onclose = function() {
                console.log('WebSocket is closed.');
            };

            // 发送消息到服务器
            document.getElementById('send').addEventListener('click', function() {
                var message = document.getElementById('message').value;
                ws.send(message);
            });
        });
    </script>
</head>
<body>
<h1>WebSocket Example</h1>
<input type="text" id="message" placeholder="Type a message to send" value='{"action":"isupdate","group":"test1"}'>
<button id="send">Send Message</button>
</body>
</html>